{% stylesheet %}
.block_newsletter {
  /* padding: 100px 0; */
  text-align: center;
  position: relative;
  background-position: center center;
  background-size: cover;
}

.block_newsletter h3 {
  text-align: center;
  font-size: 26px;
}

.block_newsletter .layer_opacity {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.block_newsletter .block_newsletter_content {
  position: relative;
  z-index: 9;
}

.block_newsletter form {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.block_newsletter .newsletter_txt {
  min-height: 44px;
  width: calc(100% - 155px);
  text-indent: 10px;
  border: 1px solid #707070;
  box-sizing: border-box;
  border-radius: var(--button_border_radius);
}

.block_newsletter .newsletter_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  min-height: 44px;
  cursor: pointer;
  font-size: 16px;
  overflow: hidden;
  word-break: break-all;
  border-radius: var(--button_border_radius);
  background-color: var(--btn-bg);
  color: var(--btn-color);
}

@media (max-width: 767px) {
  .block_newsletter form {
    flex-wrap: wrap;
  }
  .block_newsletter .newsletter_txt {
    width: 100%;
  }
  .block_newsletter .newsletter_button {
    width: 100%;
    margin-top: 15px;
  }
}

{% endstylesheet %}

{% assign block_id = block_id | default : section.block_id %}
<div class="block_newsletter {% if section.settings.fullScreen %}full_container_wrapper{% else %}container_wrapper{% endif %}" style="{%- if section.settings.newsletterBg.src -%}background-image: url({{ section.settings.newsletterBg.src }});{%- endif -%} background-color:  {{ section.settings.newsletterBgColor }};padding: {{ section.settings.padding.top | abs }}px {{ section.settings.padding.right | abs }}px {{ section.settings.padding.bottom | abs }}px {{ section.settings.padding.left | abs }}px;" >
    <div class="layer_opacity" style="opacity: {{ section.settings.layerOpacity  | divided_by : 100 }}; background-color: {{ section.settings.layerBgColor }};"></div>
    <div class="block_newsletter_content {% if section.settings.format == '2' %}format_style{% endif %}">
			{% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

        <form>
            <input id="block_newsletter_email_{{block_id}}" type="text" value="" class="newsletter_txt" placeholder="{{ lang.general.email }}" style="border:1px solid {{ section.settings.buttonBgColor }};" >
            <button type="button" value="" id="newsletter_btn{{block_id}}" class="newsletter_button" style="--btn-bg: {{ section.settings.buttonBgColor }};--btn-color: {{ section.settings.buttonColor }};" >
              {{ section.settings.buttonName }}
            </button>
        </form>
    </div>
</div>
 
<script type="text/javascript">
  (function(){
 const blockSubmitNewsletter = moi.throttle(function(){
        var domEmail =  "#block_newsletter_email_{{block_id}}";
        email = $("#block_newsletter_email_{{block_id}}").val();
        if (email == "")
        {
            moi.tooltip({
                placement: "top",
                el: domEmail,
                timer: 5000,
                space: 0,
                content: "{{ lang.general.please_enter_a_valid_email_address }}"
            })
            return;
        }
        $isvalidemail = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(email);
        if (!$isvalidemail)
        {
            moi.tooltip({
                placement: "top",
                el: domEmail,
                timer: 1000,
                space: 0,
                content: "{{ lang.general.please_enter_a_valid_email_address }}"
            })
            return;
        }
        const load = moi.nodeShowLoading('#newsletter_btn{{block_id}}','{{ section.settings.buttonColor }}');
        moi.ajax({
            url: '/module/newsletter',
            type: 'POST',
            data: JSON.stringify({
                email: email
            }),
            dataType: 'json',
            cache: false,
            complete: function () {
                  load.close();
            },
            success: function(res) {
                if (res.data && res.data.data) {
                    if(res.data.new_customer){
                        callback_generate_lead()
                    }
                    moi.message(
                        {
                          content: `{{ section.settings.newsletterTip }}`
                        }
                    );
                } else {
                    moi.tooltip({
                        placement: "top",
                        el: domEmail,
                        timer: 1000,
                        space: 0,
                        content: "{{ lang.general.subscribe_failed }}"
                    })
                }
            },
            error: function() {
                moi.tooltip({
                    placement: "top",
                    el: domEmail,
                    timer: 1000,
                    space: 0,
                    content: "{{ lang.general.connection_fails_please_retry_refresh }}"
                })
            }
        });
        },3000)
        $("#newsletter_btn{{block_id}}").click(function(){
          blockSubmitNewsletter()
        })
  })()
       
</script>   


{% schema %}
{
	"tag": "section",
	"class": "block_newsletter",
	"max_blocks": "",
	"is_global": false,
	"name": {
		"zh_CN": "订阅",
		"en_US": "Subscribe"
	},
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_layout",
			"label": {
				"zh_CN": "内容留白",
				"en_US": "Content blank"
			},
			"id": "padding"
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Subscribe to our newsletter"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Sign up for our email list and get 15% off your first order"
		},
		{
			"type": "card_input",
			"id": "buttonName",
			"label": {
				"zh_CN": "订阅按钮文字",
				"en_US": "Subscribe button text"
			},
			"default": "Subscribe"
		},
		{
			"type": "card_textarea",
			"id": "newsletterTip",
			"label": {
				"zh_CN": "订阅成功文字",
				"en_US": "Subscribe successful text"
			},
			"default": "Subscribe Success"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "背景图片",
				"en_US": "Background image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"id": "newsletterBg"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "fullScreen"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			},
			"default": "#000",
			"id": "layerBgColor"
		},
		{
			"type": "card_slider",
			"id": "layerOpacity",
			"max": "100",
			"min": "0",
			"label": {
				"zh_CN": "蒙层透明度",
				"en_US": "Mask transparency"
			},
			"default": "50%"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "颜色设置",
				"en_US": "Color Settings"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "按钮背景颜色",
				"en_US": "Button background color"
			},
			"default": "#ff0000",
			"id": "buttonBgColor"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "图标/按钮文字颜色",
				"en_US": "Icon/button text color"
			},
			"default": "#fff",
			"id": "buttonColor"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"padding": {
				"top": "0",
				"left": "15",
				"right": "15",
				"bottom": "0"
			},
			"title": "Subscribe to our newsletter",
			"detail": "Join our Friends and Family Mailing List",
			"buttonName": "Subscribe",
			"newsletterTip": "Thank you for joining our mailing list!",
			"format": "2",
			"newsletterBg": {
				"src": "",
				"alt": ""
			},
			"fullScreen": false,
			"layerBgColor": "#fff",
			"layerOpacity": "0",
			"buttonBgColor": "#1d1f21",
			"buttonColor": "#fff"
		},
		"blocks": []
	},
	"icon": "icon-dingyue"
}
{% endschema %}